/**
 * European Gaming — redesigned header (cs-header-5).
 *
 * Phase 1: dark utility top bar + white primary bar (logo, dropdown nav,
 * search toggle + collapsible search bar). Desktop-complete. The mobile
 * drawer + search overlay are layered on in a later phase; below the 45rem
 * breakpoint the primary menu is hidden for now (logo + search remain).
 *
 * Tokens and structure mirror the approved design handoff (nav-handoff.jsx).
 */

.nv {
    --eg-red: #ed1c24;
    --eg-ink: #0e0e10;
    --eg-ink-2: #26262a;
    --eg-line: #e6e3dd;
    --eg-line-2: #efece6;
    --eg-paper: #fbfaf6;
    --eg-mute: #6b6b70;
    --eg-surface: #f4f1eb;
    --eg-surface-hover: #e9e4d8;
    --eg-bg-soft: #f7f5f0;
    --eg-accent: #ed1c24;
    --eg-white: #fff;
    --eg-topbar-dim: #cfcfd1;
    --eg-topbar-dot: #3a3a3e;
    --eg-mute-2: #7a7a80;
    --eg-social-hover: #222226;
    --eg-drawer-bg: #2e2a24;
    --eg-drawer-social: #3d3830;
    --eg-drawer-text: #e6e1d6;
    --eg-drawer-link: #c8c2b4;
    --eg-kbd: #777;
    --eg-font-display: 'DM Sans', 'Inter', system-ui, sans-serif;
    --eg-font-ui: 'Inter', system-ui, sans-serif;

    position: sticky;
    top: var(--cs-adminmbar-offset, 0);
    z-index: 50;
    background: var(--eg-white);
    font-family: var(--eg-font-ui);
}

.nv *,
.nv *::before,
.nv *::after {
    box-sizing: border-box;
}

/* ───────── dark utility top bar ───────── */
.nv__topbar {
    background: var(--eg-ink);
    color: var(--eg-topbar-dim);
}

.nv__topbar-inner {
    max-width: var(--cs-desktop-container, 1448px);
    margin: 0 auto;
    min-height: 2.25rem;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.nv__top-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 3.25rem;
}

.nv__top-links li {
    display: flex;
    align-items: center;
    position: relative;
}

.nv__top-links li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -1.625rem;
    width: 0.1875rem;
    height: 0.1875rem;
    border-radius: 50%;
    background: var(--eg-topbar-dot);
}

.nv__top-links a {
    color: var(--eg-topbar-dim);
    text-decoration: none;
    font: 500 0.75rem/1.5 var(--eg-font-ui);
    white-space: nowrap;
}

.nv__top-links a:hover {
    color: var(--eg-white);
}

.nv__socials {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex: 0 0 auto;
}

.nv__socials a {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 0.3125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--eg-topbar-dim);
    transition: background .15s, color .15s;
}

.nv__socials a:hover {
    background: var(--eg-social-hover);
    color: var(--eg-white);
}

.nv__socials img,
.nv__socials svg {
    width: 0.8125rem;
    height: 0.8125rem;
    display: block;
}

/* ───────── white primary bar ───────── */
.nv__main {
    background: var(--eg-white);
    border-bottom: 1px solid var(--eg-line);
    position: relative;
}

.nv__main-inner {
    max-width: var(--cs-desktop-container, 1448px);
    margin: 0 auto;
    height: 4.875rem;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nv__logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.nv__logo img {
    height: 2.125rem;
    width: auto;
    display: block;
}

.nv__menu {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex: 1 1 auto;
    min-width: 0;
}

.nv__item {
    position: relative;
}

.nv__item > button,
.nv__item > a {
    appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
    padding: 0.625rem 0.875rem 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font: 600 0.875rem var(--eg-font-ui);
    color: var(--eg-ink-2);
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.nv__item > button:hover,
.nv__item > a:hover,
.nv__item.is-open > button {
    background: var(--eg-surface);
    color: var(--eg-ink);
}

.nv__item.is-active > button,
.nv__item.is-active > a {
    color: var(--eg-accent);
}

.nv__item.is-active > button::after,
.nv__item.is-active > a::after {
    content: "";
    position: absolute;
    left: 0.875rem;
    right: 0.875rem;
    bottom: 0.375rem;
    height: 0.125rem;
    background: var(--eg-accent);
    border-radius: 0.125rem;
}

.nv__caret {
    width: 0.625rem;
    height: 0.625rem;
    opacity: .5;
    transition: transform .2s;
}

.nv__item.is-open .nv__caret {
    transform: rotate(180deg);
}

.nv__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin-left: auto;
}

.nv__icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 999px;
    border: 0;
    background: var(--eg-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--eg-ink);
    cursor: pointer;
    transition: background .15s;
}

.nv__icon-btn:hover {
    background: var(--eg-surface-hover);
    color: var(--eg-ink);
}

/* keep the icon colour fixed on hover (only the background reacts) */
.nv__icon-btn:hover svg {
    color: var(--eg-ink);
}

/* open state (search bar expanded): inverted — ink bg + white icon.
   Per the approved design canvas (IconStates). Wins over hover. */
.nv__icon-btn[aria-expanded="true"],
.nv__icon-btn[aria-expanded="true"]:hover {
    background: var(--eg-ink);
    color: var(--eg-white);
}

.nv__icon-btn[aria-expanded="true"] svg,
.nv__icon-btn[aria-expanded="true"]:hover svg {
    color: var(--eg-white);
}

.nv__icon-btn svg {
    width: 1rem;
    height: 1rem;
}

/* ───────── collapsible search bar ───────── */
.nv__searchbar {
    border-top: 1px solid var(--eg-line-2);
    background: var(--eg-paper);
    overflow: hidden;
    max-height: 0;
    transition: max-height .22s ease;
}

.nv__searchbar.is-open {
    max-height: 5rem;
}

.nv__searchbar-inner {
    max-width: var(--cs-desktop-container, 1448px);
    margin: 0 auto;
    padding: 0.875rem 2rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.nv__searchbar-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--eg-white);
    border: 1px solid var(--eg-line);
    border-radius: 0.625rem;
    padding: 0.6875rem 0.875rem;
    color: var(--eg-ink-2);
    font-size: 0.875rem;
}

.nv__searchbar-field svg {
    width: 1rem;
    height: 1rem;
    color: var(--eg-mute-2);
    flex: 0 0 auto;
}

.nv__searchbar-field input {
    all: unset;
    flex: 1;
    font: inherit;
}

.nv__searchbar-hint {
    font: 500 0.75rem var(--eg-font-ui);
    color: var(--eg-mute-2);
    display: flex;
    gap: 0.875rem;
    flex: 0 0 auto;
}

.nv__searchbar-hint kbd {
    font: 600 0.65625rem var(--eg-font-ui);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background: var(--eg-white);
    border: 1px solid var(--eg-line);
    color: var(--eg-kbd);
}

/* ───────── dropdown panels ───────── */
.nv__item .panel {
    position: absolute;
    left: 0;
    top: 100%;
    transform: translateY(0.375rem);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* delay hiding until the fade finishes so closed-panel links leave the tab order */
    transition: opacity .15s, transform .15s, visibility 0s linear .15s;
    width: 21.25rem;
    background: var(--eg-white);
    border: 1px solid var(--eg-line);
    border-radius: 0.75rem;
    padding: 0.625rem;
    box-shadow: 0 24px 60px -16px rgba(15, 12, 8, .25), 0 2px 8px rgba(15, 12, 8, .06);
    z-index: 30;
}

.nv__item.is-open .panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .15s, transform .15s, visibility 0s;
}

.panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.panel__list a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5625rem 0.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--eg-ink-2);
    font: 500 0.84375rem var(--eg-font-ui);
}

.panel__list a:hover {
    background: var(--eg-bg-soft);
    color: var(--eg-ink);
}

.panel__list .label {
    flex: 1;
}

.panel__seeall {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--eg-line-2);
    font: 600 0.78125rem var(--eg-font-ui);
    color: var(--eg-accent);
    text-decoration: none;
}

/* hover mirrors the primary nav "active section" look: accent text + a 0.125rem
   accent underline — under the label only, not the arrow. Colour is forced
   (the parent theme recolours a:hover). Same on desktop + mobile. */
.panel__seeall:hover,
.edi__seeall:hover {
    color: var(--eg-accent);
}

.panel__seeall:hover .nv__seeall-label,
.edi__seeall:hover .nv__seeall-label {
    text-decoration: underline;
    text-decoration-color: var(--eg-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3125rem;
}

/* invisible hover bridge so the cursor can travel button → panel */
.nv__item.is-open::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.875rem;
    z-index: 25;
}

/* ───────── focus states (a11y) ───────── */
.nv a:focus-visible,
.nv button:focus-visible {
    outline: 2px solid var(--eg-accent);
    outline-offset: 2px;
    /* no border-radius override — the outline follows each element's own
       radius (pill icon stays round, menu items keep their 0.5rem corners). */
}

/* Search fields: indicate focus on the field container (not a ring on the
   bare input). Same colour as the default border, just thicker — via
   box-shadow so there's no layout shift. */
.nv__searchbar-field:focus-within {
    box-shadow: 0 0 0 1px var(--eg-line);
}

.nv__drawer-search:focus-within,
.nv__msheet-field:focus-within {
    box-shadow: 0 0 0 1px var(--eg-line);
}

.panel__list a:focus-visible {
    outline-offset: -2px;
}

/* ───────── mobile chrome (hidden on desktop) ───────── */
.nv__hamburger {
    display: none;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 0.625rem;
    background: var(--eg-surface);
    color: var(--eg-ink);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.nv__hamburger svg {
    width: 1.125rem;
    height: 1.125rem;
}

.nv__icon-btn--mobile-search {
    display: none;
    border-radius: 0.625rem;
}

/* ───────── mobile drawer + scrim + search sheet ───────── */
.nv__scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 8, .45);
    backdrop-filter: saturate(120%) blur(0.125rem);
    z-index: 1055;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.nv__scrim.is-open {
    opacity: 1;
    pointer-events: auto;
}

.nv__drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 88%;
    max-width: 22.5rem;
    background: var(--eg-white);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    box-shadow: 8px 0 28px rgba(0, 0, 0, .18);
    transform: translateX(-100%);
    /* visibility:hidden takes the off-screen (closed) drawer out of the tab
       order; delayed so it stays visible through the slide-out animation. */
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
}

.nv__drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .25s ease, visibility 0s;
}

.nv__drawer-head {
    padding: 0.875rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-bottom: 1px solid var(--eg-line);
}

.nv__drawer-head-top {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.nv__drawer-logo img {
    height: 1.5rem;
    width: auto;
    display: block;
}

.nv__drawer-close {
    margin-left: auto;
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--eg-surface);
    color: var(--eg-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nv__drawer-close svg {
    width: 0.875rem;
    height: 0.875rem;
}

.nv__drawer-search,
.nv__msheet-field {
    background: var(--eg-surface);
    border-radius: 0.625rem;
    padding: 0.6875rem 0.8125rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--eg-mute-2);
}

.nv__drawer-search svg,
.nv__msheet-field svg {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--eg-mute-2);
    flex: 0 0 auto;
}

.nv__drawer-search input,
.nv__msheet-field input {
    all: unset;
    flex: 1;
    font: 500 0.84375rem var(--eg-font-ui);
    color: var(--eg-ink);
}

.nv__drawer-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* accordion */
.acc__item {
    border-bottom: 1px solid var(--eg-line-2);
}

.acc__head {
    appearance: none;
    border: 0;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    padding: 1.125rem 1.375rem;
    display: flex;
    align-items: center;
    font: 700 1rem var(--eg-font-display);
    color: var(--eg-ink);
    transition: background .08s ease;
}

/* pressed (touch) feedback — 80ms per handoff */
.acc__head:active {
    background: var(--eg-paper);
}

/* accordion head uses an inset focus ring per the handoff */
.nv .acc__head:focus-visible {
    outline: 2px solid var(--eg-accent);
    outline-offset: -2px;
}

.acc__head .right {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.acc__head .caret {
    width: 0.875rem;
    height: 0.875rem;
    opacity: .5;
    transition: transform .2s;
}

.acc__item.is-open .acc__head .caret {
    transform: rotate(180deg);
}

.edi__panel {
    max-height: 0;
    overflow: hidden;
    /* visibility:hidden takes the collapsed links out of the tab order;
       delayed so they stay visible through the collapse animation. */
    visibility: hidden;
    transition: max-height .3s ease, padding .3s ease, visibility 0s linear .3s;
    padding: 0 1.375rem;
}

.acc__item.is-open .edi__panel {
    max-height: 75rem;
    visibility: visible;
    padding: 0 1.375rem 1.375rem;
    transition: max-height .3s ease, padding .3s ease, visibility 0s;
}

.edi__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.edi__list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8125rem 0;
    text-decoration: none;
    color: var(--eg-ink);
    font: 500 0.90625rem var(--eg-font-ui);
    border-top: 1px solid var(--eg-line-2);
    transition: background .08s ease;
}

.edi__list li:first-child a {
    border-top: 0;
}

/* pressed (touch) feedback — 80ms per handoff */
.edi__list li a:active {
    background: var(--eg-paper);
}

.edi__seeall {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.875rem;
    font: 600 0.8125rem var(--eg-font-ui);
    color: var(--eg-accent);
    text-decoration: none;
}

/* drawer footer (dark) */
.nv__drawer-footer {
    flex: 0 0 auto;
    padding: 1.125rem 1.125rem 1.375rem;
    background: var(--eg-drawer-bg);
    color: var(--eg-drawer-text);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.nv__drawer-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.125rem;
    flex-wrap: wrap;
}

.nv__drawer-links a {
    color: var(--eg-drawer-link);
    text-decoration: none;
    font: 500 0.8125rem var(--eg-font-ui);
}

.nv__drawer-links a:hover {
    color: var(--eg-white);
}

.nv__drawer-footer .nv__socials a {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.625rem;
    background: var(--eg-drawer-social);
    color: var(--eg-drawer-text);
}

.nv__drawer-footer .nv__socials a:hover {
    background: var(--eg-accent);
    color: var(--eg-white);
}

.nv__drawer-footer .nv__socials img,
.nv__drawer-footer .nv__socials svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* mobile search sheet */
.nv__msheet {
    position: fixed;
    inset: 0;
    background: var(--eg-white);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    /* off-screen (closed) sheet out of the tab order; delayed for the slide. */
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
}

.nv__msheet.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform .25s ease, visibility 0s;
}

.nv__msheet-bar {
    height: 3.5rem;
    flex: 0 0 3.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--eg-line);
}

.nv__msheet-logo img {
    height: 1.5rem;
    width: auto;
    display: block;
}

.nv__msheet-close {
    margin-left: auto;
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--eg-surface);
    color: var(--eg-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nv__msheet-close svg {
    width: 0.875rem;
    height: 0.875rem;
}

.nv__msheet-head {
    padding: 0.875rem 1rem;
}

/* body scroll lock while a mobile overlay is open */
body.eg-nav-lock {
    overflow: hidden;
}

/* ───────── breakpoint: mobile < 1100 ───────── */
@media (max-width: 68.6875em) {
    .nv__topbar {
        display: none;
    }

    .nv__menu {
        display: none;
    }

    .nv__searchbar {
        display: none;
    }

    .nv__icon-btn--desktop-search {
        display: none;
    }

    .nv__hamburger,
    .nv__icon-btn--mobile-search {
        display: inline-flex;
    }

    .nv__main-inner {
        position: relative;
        height: 3.5rem;
        padding: 0 0.875rem;
        justify-content: space-between;
    }

    .nv__logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        pointer-events: auto;
    }

    .nv__logo img {
        height: 1.875rem;
    }
}

/* ───────── desktop ≥ 1100: mobile apparatus off ───────── */
@media (min-width: 68.75em) {
    .nv__hamburger,
    .nv__icon-btn--mobile-search,
    .nv__scrim,
    .nv__drawer,
    .nv__msheet {
        display: none !important;
    }
}

/* ───────── parent-theme button override ─────────
   The parent theme styles every button:hover / button:focus with an accent
   background (--cs-color-button-hover), which leaks onto the redesign's
   buttons (notably the accordion head, which stays focused after a tap and
   shows a red background). Re-assert the intended surfaces here. Only <button>
   elements are affected — links and socials are untouched by the parent rule. */
.acc__head:hover,
.acc__head:focus {
    background: transparent;
    color: var(--eg-ink);
}

.acc__head:active {
    background: var(--eg-paper);
}

.nv__item > button:focus,
.nv__item > a:focus {
    background: var(--eg-surface);
    color: var(--eg-ink);
}

.nv__icon-btn:focus,
.nv__hamburger:hover,
.nv__hamburger:focus,
.nv__drawer-close:hover,
.nv__drawer-close:focus,
.nv__msheet-close:hover,
.nv__msheet-close:focus {
    background: var(--eg-surface);
    color: var(--eg-ink);
}

/* search toggle keeps the inverted open state even when focused */
.nv__icon-btn[aria-expanded="true"]:focus {
    background: var(--eg-ink);
    color: var(--eg-white);
}

/* ───────── reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
    .nv__searchbar,
    .nv__item .panel,
    .nv__caret,
    .nv__icon-btn,
    .nv__socials a,
    .nv__scrim,
    .nv__drawer,
    .nv__msheet,
    .edi__panel,
    .acc__head,
    .acc__head .caret,
    .edi__list li a {
        transition: none;
    }
}